<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客查看</title>
    <link rel="stylesheet" href="https://cdn.makalu.cc/css/element-ui/index.css"/>
    <link rel="stylesheet" href="https://sindresorhus.com/github-markdown-css/github-markdown.css">
    <style>
        .anchor-point {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card style="margin: 10px;">
        <div style="height: 60px;line-height: 60px;font-size: 25px">
            casually blog
        </div>
    </el-card>
    <el-row>
        <el-col :span="4">
            <el-card style="margin: 0 0 0 10px;height: 800px;overflow: auto">
                <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card style="margin: 0 10px;height: 800px">
                <template slot="header">{{blogTitle}}</template>
                <div style="height: 700px;overflow:auto;">
                    <div v-html="blogInnerHTML" class="markdown-body"></div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card style="margin: 0 10px;height: 800px">
                <div v-for="anchor in titleList" :style="{ padding: `5px 0 5px ${anchor.indent * 20}px` }">
                    <el-tooltip effect="dark" :content="anchor.title" placement="top">
                        <el-link :href="`#${anchor.title}`" class="anchor-point"> {{ anchor.title }}</el-link>
                    </el-tooltip>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
</body>
</html>
<script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
<script src="https://cdn.makalu.cc/js/element-ui/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/marked/4.1.1/marked.min.js"></script>
<script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>


<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                treeData: [],
                blogTitle: "",
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },
                host: "http://192.168.31.13:8080/blog",
                titleList: [],
                blogInnerHTML: ""
            }
        },
        mounted() {
            this.getBlogMenu()
        },
        methods: {
            getBlogMenu() {
                let that = this
                axios.post(this.host + "/readBlogList", {}).then(res => {
                    that.treeData = res.data
                })
            },
            handleNodeClick(data) {
                if (!data.children) {
                    let that = this
                    this.blogTitle = data.name.replace(".md", "")
                    axios.post(this.host + "/readBlog", {path: data.path}).then(res => {
                        let renderer = new marked.Renderer();
                        let linkRenderer = renderer.link;
                        renderer.link = (href, title, text) => {
                            const html = linkRenderer.call(renderer, href, title, text);
                            return html.replace(/^<a /, '<a target="_blank" ');
                        };
                        that.blogInnerHTML = marked.marked(res.data,{renderer})
                        that.$nextTick(res => {
                            that.getTitle()
                        })
                    })
                }
            },
            showBlog() {
                return
            },
            // markdown-生成标题
            getTitle() {
                //使用js选择器，获取对应的h标签，组合成列表
                const anchors = document.querySelectorAll(
                    'h1,h2,h3,h4,h5,h6'
                )
                //删除标题头尾的空格
                const titles = Array.from(anchors).filter((title) => !!title.innerText.trim());
                //当文章h标签为空时，直接返回
                if (!titles.length) {
                    this.titleList = [];
                    return;
                }
                //从h标签属性中，提取相关信息
                const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort();
                this.titleList = titles.map((el) => ({
                    title: el.innerText, //标题内容
                    lineIndex: el.getAttribute('data-v-md-line'), //标签line id
                    indent: hTags.indexOf(el.tagName), //标签层级
                    height: el.offsetTop, //标签距离顶部距离
                }));
            }
        }
    })
</script>
